<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function loadImg(src) {
            // 1.返回一个匿名的Promise类的实例
            const p = new Promise(
                // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数
                (resolve, reject) => {
                    //3. 先定义一张图片,创建一个element
                    const img = document.createElement('img')
                    //4. 加载完之后传入一个回调函数
                    img.onload = () => {
                        //5.通过resolve方法将要加载的对象传进来
                        resolve(img)
                    }
                    //5.当遇到问题，就执行reject这个函数
                    img.onerror = () => {
                        //6. 失败的话就传入一个模板字符串,把错误信息传递出去
                        const err = new Error(`图片加载失败${src}`);
                        reject(err);
                    }
                    img.src = src;
                }
            )
            return p
        }


        const url1 = 'https://img3.sycdn.imooc.com/5b8cd5540001a30c02000200-140-140.jpg';
        const url2 = 'https://avatar.csdnimg.cn/0/1/A/1_weixin_44738381.jpg';

        // 定义一个匿名函数立马去执行
        // 原因：执行await必须要在外以async函数为包裹
        (async function () {
            // 同步的写法执行了异步的代码

            // img1
            const img1 = await loadImg1()
            console.log(img1.height, img1.width); // 140 140

            // img2 
            const img2 = await loadImg2()
            console.log(img2.height, img2.width);// 150 150
        })()

        // 如果使用promise就避免不了写回调函数




        // 定义两个img函数
        async function loadImg1() {
            const img1 = await loadImg(url1);
            return img1;
        }

        async function loadImg2() {
            const img2 = await loadimg(url1);
            return img2;
        }

        // 这样写的原因是告诉：不但await后面可以追加promise对象，还可以追加async函数
    </script>
</body>

</html>